<template>
  <div class="container">
    <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
      <template #append>
        <el-button icon="el-icon-search" @click="search(searchVal)"></el-button>
      </template>
    </el-input>
    <el-transfer
      v-model="transforVal"
      :data="transforData"
      @left-check-change="leftCheck"
      @change="onChange"
      :titles="treeTitles"
    />
  </div>
</template>

<script>
export default {
  name: 'SearchTrans',
  inject: ['getCopiesData'],
  props: {
    transforData: {
      type: Array,
      default: function () {
        return [
          { key: 1, label: '1' },
          { key: 2, label: '2' },
        ]
      },
    },
    treeTitles: {
      type: Function,
    },
    radio: {
      type: Boolean,
      default: () => {
        return undefined
      },
    },
    search: {
      type: Function,
    },
  },
  data() {
    return {
      transforVal: [],
      searchVal: '',
    }
  },
  methods: {
    leftCheck(val) {
      console.log(this.radio)
      if (this.radio) {
        const transData = this.transforData.filter((item) => {
          if (!val.includes(item.key)) {
            item.disabled = val.length >= 1 ? true : false
          }
          return item
        })
        this.$emit('update:transforData', transData)
      }
    },
    onChange(val) {
      console.log(this.radio)
      if (this.radio) {
        if (!val.length) {
          const transData = this.transforData.filter((item) => {
            item.disabled = false
            return item
          })
          this.$emit('update:transforData', transData)
        }
      }

      this.getCopiesData(val, this.transforData)
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  .el-input {
    width: 200px;
    margin-bottom: 10px;
    float: right;
  }
  .el-transfer {
    float: right;
  }
}
</style>
